<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery鼠标悬停图片翻转显示文字说明效果</title>
<style>
* {	margin:0px;	padding:0px;}
li {list-style:none;}
#brand {width:575px;height:500x;border:1px solid #dddddd; background-color: #FFF; box-shadow:0px 0px 5px #dddddd;margin:30px auto;overflow:hidden;}
#brand .title {width:100%;height:35px;line-height:35px;font-size:16px;margin-top:4px;border-bottom:2px solid #33261c;text-align:center;color:#33261c;}
#brand .bd-box {width:568px;height:516px;overflow:hidden;padding:0px 24px;}
#brand .bd-box li {float:left;width:244px;height:154px;overflow:hidden;position:relative;margin:10px 10px 0px 10px;_margin:10px 10px 0px 5px;}
/* 第二步：写布局样式，这里面有个重点，图片的一定要放在内容的上面，
所以图片设置z-index为2，内容设置为1 */
#brand .bd-box li img {
	width:240px; height:150px; border:1px solid #e9e8e8;
	position:absolute;left:0px;top:0px;z-index:2;overflow:hidden;}
#brand .bd-box li span {
	z-index: 1; width:230px; position:absolute;	 left:0px;	
	line-height:24px; font-size:16px; color:#FFF; background:#000;
	overflow:hidden; display:none; padding: 5px;}
#brand .bd-box li a {width:240px;height:150px;position:absolute;left:0px;top:0px;z-index:3;}
</style>
</head>
<body style="background-color:#000; margin-top:100px;">
<!-- 第一步：写好图片元素和显示的内容 -->
<div id="brand">
  <div class='title'> 热门推荐 </div>
  <ul class='bd-box'>
    <li> <a href="javascript:void(0);"></a><img  src="https://www.php.cn/static/images/sw/kaozheng.png" /><span >信息系统项目管理师（软考高级）一站式通关课程</span></li>
    <li> <a href="javascript:void(0);"></a><img src="https://www.php.cn/static/images/sw/crm.jpg" /><span>CRMEB打通版是历经6年时间匠心之作！</span></li>
    <li> <a href="javascript:void(0);"></a><img src="https://www.php.cn/static/images/sw/phpjiuye.png" /><span>第21期《PHP入门+综合实战进阶》可单独报名了！</span></li>
    <li> <a href="javascript:void(0);"></a><img src="https://www.php.cn/static/images/sw/qianduan.png" /><span>全新模式，边练边学，最终达到独立开发水平</span></li>
    <li> <a href="javascript:void(0);"></a><img src="https://www.php.cn/static/images/sw/mvc.png" /><span>自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)</span></li>
    <li> <a href="javascript:void(0);"></a><img src="https://www.php.cn/static/images/sw/go_mob_top.png" /><span>本课程使用go语言从零开始编写基于HTTP服务器的家庭相册系统，支持多种客户端访问，打通家里家里智能设备！适合对计算机编程有一定了解，想学习Golang的同学。</span></li>
  </ul>
</div>
<script src="./js/jquery-1.8.3.min.js"></script>
<script>

//display:block;height:75px;top:0px;		显示
//style="display:none;height:0px;top:38px;" 隐藏
// 第三步：开始写js
$(function(){
	var aLi = $('#brand .bd-box li');			
	var aSpan = aLi.find('span');
	var aImg = aLi.find('img');
	aLi.each(function(index){
		//当鼠标移入的时候，开始运行动画
		//图片高度开始慢慢消失，并且离顶部高度慢慢变大最终达到76，最终消失
		//然后内容相反，慢慢展开高度，离顶部在慢慢变成0，最终展开内容
		$(this).mouseover(function(){
			aImg.eq(index).stop();
			aSpan.eq(index).stop();
			aImg.eq(index).animate({
				height:0,
				top:75
			},80,'',function(){
				$(this).hide();
				aSpan.eq(index).show().animate({
					height:150,
					top:0
				},80)
			})
		})
		//当鼠标移开的时候和上一步相反，内容消失，图片展开
		$(this).mouseout(function(){
			aImg.eq(index).stop();
			aSpan.eq(index).stop();
			aSpan.eq(index).animate({
				height:0,
				top:75
			},80,'',function(){
				$(this).hide();
				aImg.eq(index).show().animate({
					height:150,
					top:0
				},80)
			})
		})
	})
})
</script>
</body>
</html>